<template>
  <div class="content">
    <section class="cropper-area">
      <div class="img-wrap">
        <div class="img-cropper" v-if="imgSrc">
          <vueCropper
            @mouseenter.native="enter"
            @mouseleave.native="leave"
            ref="cropper"
            :img="imgSrc"
            :outputSize="1"
            :info="true"
            :canScale="true"
            outputType="png"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :canMove="false"
          ></vueCropper>
        </div>
        <img v-if="cropImgPath" class="display-img" :src="cropImgPath">
      </div>

      <div class="mt-10">
        <el-form ref="form" label-width="80px">
          <el-form-item label="证件类型">
            <el-select
              v-model="selCredentialsTypeId"
              @change="credentialsTypeChange"
            >
              <el-option
                v-for="item in credentialsTypes"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="像素尺寸">
            <label style="color: #606266">宽：</label
            ><el-input
              type="number"
              v-model="selCredentialsType.width"
              style="width: 150px"
            />
            <label class="ml-10" style="color: #606266">高：</label
            ><el-input
              type="number"
              v-model="selCredentialsType.height"
              style="width: 150px"
            />
          </el-form-item>

          <el-form-item label="文件大小">
            <label style="color: #606266">最小：</label
            ><el-input
              type="number"
              v-model="selCredentialsType.minBytes"
              style="width: 150px"
            />KB<label style="margin-left: 10px; color: #606266">最大：</label
            ><el-input
              type="number"
              v-model="selCredentialsType.maxBytes"
              style="width: 150px"
            />KB
          </el-form-item>
          <el-form-item label="底色">
            <el-select v-model="selBackgroudColor">
              <el-option
                v-for="item in backgroudColors"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <input
          ref="input"
          type="file"
          name="image"
          accept="image/*"
          @change="setImage"
        />
        <el-button type="primary" @click.prevent="showFileChooser"
          >上传图片</el-button
        >
        <el-button type="primary" @click.prevent="cropImage"
          >下载图片</el-button
        >
      </div>
    </section>
  </div>
</template>

<script>
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { removebg } from "/src/api/cropper";
import pic_upload from '/src/assets/images/pic_upload.png'

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imgSrc: pic_upload,
      cropImgPath: "",
      data: null,
      selCredentialsTypeId: 1,
      selCredentialsType: {},
      selBackgroudColor: "白色",
      backgroudColors: ["白色", "蓝色", "红色"],
      options: {
        autoCrop: true,
        autoCropWidth: 1,
        autoCropHeight: 1,
      },
      credentialsTypes: [
        {
          id: 1,
          name: "一寸",
          width: 295,
          height: 413,
          minBytes: 50,
          maxBytes: 500,
          backgroundColor: "蓝色",
        },
        {
          id: 2,
          name: "大一寸",
          width: 390,
          height: 567,
          minBytes: 50,
          maxBytes: 500,
          backgroundColor: "蓝色",
        },
        {
          id: 3,
          name: "小二寸",
          width: 413,
          height: 531,
          minBytes: 50,
          maxBytes: 500,
          backgroundColor: "蓝色",
        },
        {
          id: 4,
          name: "二寸",
          width: 413,
          height: 579,
          minBytes: 50,
          maxBytes: 500,
          backgroundColor: "蓝色",
        },
        {
          id: 5,
          name: "小二寸",
          width: 413,
          height: 531,
          minBytes: 50,
          maxBytes: 500,
          backgroundColor: "蓝色",
        },
        {
          id: 6,
          name: "驾驶证",
          width: 260,
          height: 378,
          minBytes: 14,
          maxBytes: 30,
          backgroundColor: "白色",
        },
        {
          id: 7,
          name: "社保证",
          width: 358,
          height: 441,
          minBytes: 10,
          maxBytes: 20,
          backgroundColor: "白色",
        },
        {
          id: 8,
          name: "身份证",
          width: 358,
          height: 441,
          minBytes: 20,
          maxBytes: 500,
          backgroundColor: "白色",
        },
        {
          id: 9,
          name: "教师资格证",
          width: 295,
          height: 413,
          minBytes: 20,
          maxBytes: 500,
          backgroundColor: "白底",
        },
        {
          id: 10,
          name: "护照",
          width: 390,
          height: 567,
          minBytes: 20,
          maxBytes: 500,
          backgroundColor: "白底",
        },

        {
          id: 11,
          name: "四六级/计算机",
          width: 144,
          height: 192,
          minBytes: 20,
          maxBytes: 200,
          backgroundColor: "白底",
        },
        {
          id: 12,
          name: "司法考试",
          width: 413,
          height: 626,
          minBytes: 50,
          maxBytes: 800,
          backgroundColor: "白底",
        },
        {
          id: 13,
          name: "会计",
          width: 144,
          height: 156,
          minBytes: 20,
          maxBytes: 500,
          backgroundColor: "白底",
        },
        {
          id: 14,
          name: "护士",
          width: 160,
          height: 210,
          minBytes: 20,
          maxBytes: 500,
          backgroundColor: "白底",
        },
        {
          id: 15,
          name: "普通话",
          width: 413,
          height: 579,
          minBytes: 20,
          maxBytes: 500,
          backgroundColor: "白底",
        },
        {
          id: 16,
          name: "高考",
          width: 480,
          height: 640,
          minBytes: 20,
          maxBytes: 500,
          backgroundColor: "白底",
        },
        {
          id: 0,
          name: "自定义格式",
          width: 100,
          height: 100,
          minBytes: 10,
          maxBytes: 500,
          backgroundColor: "白色",
        },
      ],
    };
  },
  methods: {
    credentialsTypeChange() {
      for (let i = 0; i < this.credentialsTypes.length; i++) {
        if (this.credentialsTypes[i].id === this.selCredentialsTypeId) {
          this.selCredentialsType = this.credentialsTypes[i];
          if (
            this.selCredentialsType.width > 0 &&
            this.selCredentialsType.height > 0
          ) {
            this.options.autoCropWidth = this.selCredentialsType.width;
            this.options.autoCropHeight = this.selCredentialsType.height;
            this.$refs.cropper.refresh();
          }

          break;
        }
      }
    },
    cropImage() {
      this.$refs.cropper.getCropData((data) => {
        const formData = new FormData();
        formData.append("base64Data", data);
        formData.append("backgroundColor", this.selBackgroudColor);
        removebg(formData).then((res) => {
          this.cropImgPath = res.imgPath
        });
      });
    },
    setImage(e) {
      const file = e.target.files[0];
      if (file.type.indexOf("image/") === -1) {
        alert("Please select an image file");
        return;
      }

      if (typeof FileReader === "function") {
        const reader = new FileReader();
        reader.onload = (event) => {
          this.imgSrc = event.target.result;
        };

        reader.readAsDataURL(file);
      }
    },
    showFileChooser() {
      this.$refs.input.click();
    },
    enter() {
      if (this.uploadImg == "") {
        return;
      }
      this.$refs.cropper.startCrop(); //开始裁剪
    },
    leave() {
      this.$refs.cropper.stopCrop(); //停止裁剪
    },
    save() {
      //确认截图
      this.$refs.cropper.getCropData((data) => {
        //获取截图的base64格式数据
        console.log(data);
        this.show = false;
      });
    },
  },
  mounted() {
    this.credentialsTypeChange();
  },
};
</script>

<style>
input[type=file] {
  display: none;
}

.content {
  padding-top: 5px;
  box-sizing: border-box;
}

.cropper-area {
  width: 75%;
  margin: 0 auto;
}
.img-wrap {
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content:center;
}
.display-img {
  margin-left: 30px;
  width: 300px;
  height: 300px;
}
.img-cropper {
  flex: 1;
  height: 600px;
}
</style>